<template>
	<view class="page">
		<view class="order-address" v-if="addressMsg.length==0">
			<view class="flex align" style="justify-content: center;"
				@click="$toPage('/package/mine/setAddress/setAddress?setNew=true')">
				<image src="https://wx.2024csnl.com/static/goods/order-add.png" mode="aspectFill" class="order-add" />
				<view class="add-address">添加地址</view>
			</view>
		</view>

		<view class="" v-else>
			<view class="type-box">
				<view class="inner">
					<view
						v-for="(item,i) in freightList"
						:class="{
							'take-type': true,
							'is-active': type==i
						}"
						@click="checkType(i)">
						<text>{{ item.name }}</text>
					</view>
				</view>
			</view>
			
			<!-- 用户地址 -->
			<view
				class="order-address address-checked"
				v-if="showAddress()"
				@click="onSkip('/package/mine/myAddress/myAddress?pageType=true')">
				<view class="between align">
					<view class="address-info">{{addressMsg.area}}{{addressMsg.address}}</view>
					<image
						src="https://wx.2024csnl.com/static/goods/into-black.png"
						mode="aspectFill"
						class="into" />
				</view>
				<view class="info">
					<text>{{addressMsg.name}}</text>
					<text>{{addressMsg.tel}}</text>
				</view>
			</view>
			
			<!-- 商家地址 -->
			<view v-if="showMerchantAddress('merchant')">
				<view
					class="order-address address-checked"
					@click="open('popup')">
					<view class="between align">
						<view class="address-info">{{getVal.name}}</view>
						<image
							src="https://wx.2024csnl.com/static//home/home-dw.png"
							mode="aspectFill"
							class="into"
							style="width: 30rpx;height: 30rpx;"
							@click.stop="openMap(freightList[type].storedata[current].longitude,freightList[type].storedata[current].latitude,freightList[type].storedata[current].name)" />
					</view>
					<view class="info">
						<text>{{getVal.address}} </text>
						<text>{{getVal.tel}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- <code>{{ business }}</code> -->
		
		<view class="order-info__shop">
			<view class="order-info__shop-thead">
				<view class="name">
					<image :src="business.logo" mode=""></image>
					<text>{{ business.name }}</text>
				</view>
			</view>
			<view class="order-info__shop-tbody">
				<view
					class="order-infobox"
					v-for="(item, index) in proData"
					:key="index">
					<view class="order-info flex">
						<image
							:src="item.product.pic"
							mode="aspectFill"
							class="order-goods-img" />
						<view class="fl between column">
							<view class="font-l goods-name">{{item.product.name}}</view>
							<view class="goods-gg">规格：{{item.guige.name}}</view>
							<view class="">
								<!-- <view class="goods-gg">x{{item.num}}</view> -->
								<view class="order-goods-price c-red">
									<text class="price-util">￥{{ payMoney }}</text>
								</view>
							</view>
						</view>
					</view>
					
					<view class="order-group">
						<view class="between align order-info">
							<view class="">购买数量</view>
							<view class="">
								<view class="tag-iconbox">
									<view class="tag-box" @click="setCartNum('sub')">
										<image
											src="https://wx.2024csnl.com/static/goods/move.png"
											mode="aspectFill"
											class="tag-icon" />
									</view>
									<view class="tag-num">{{ item.num }}</view>
									<view
										class="tag-box"
										@click="setCartNum('add')">
										<image
											src="https://wx.2024csnl.com/static/goods/add.png"
											mode="aspectFill"
											class="tag-icon" />
									</view>
								</view>
							</view>
						</view>
						<view class="between align order-info">
							<view class="">运费</view>
							<view class="">￥{{ freightList[type].freight_price }}</view>
						</view>
					</view>
				
					<view class="order-group">
						<view class="between align order-info">
							<view class="">订单备注</view>
							<view class="flex align">
								<input
									type="text"
									v-model="item.remark"
									class="discount input-box"
									placeholder="请先和商家协商一致"
									placeholder-class="p-c">
								<image
									src="https://wx.2024csnl.com/static/goods/into.png"
									mode="aspectFill"
									class="into" />
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		

		<view class="pay-box">
			<div class="inner">
				<view class="label">
					<text>待支付</text>
					<text class="c-red">￥{{payMoney}}</text>
				</view>
				<view class="pay-now" @click="onClickAffirmBtn">立即支付</view>
			</div>
		</view>

		<uni-popup ref="popup" type="bottom">
			<view class="popBox">
				<view class="titBox flex-center">
					选择自提地址
				</view>
				<view class="listBigBox">
				    <radio-group style="font-size: 27rpx;color: #333;margin: 20rpx;" @change="radioChange"
						v-for="(item,i) in popupAddress">
						<label class="select between">
							<view style="line-height: 45rpx;">
								<view class="">
									{{item.name}}
								</view>
								<view>{{item.address}}</view>
								<view>{{item.tel}}</view>
							</view>
							<radio :value="item.id.toString()" :checked="current==i" color="#41644A" />
						</label>
					</radio-group>
				</view>

			</view>
		</uni-popup>
		
		<!-- 确认收货地址正确 -->
		<uni-popup ref="affirmPopup" type="bottom">
			<view class="popBox">
				<view class="titBox flex-center affirmTit">
					确认收货地址
				</view>
				<view class="order-address address-checked"
					@click="onSkip('/package/mine/myAddress/myAddress?pageType=true')">
					<view class="between align">
						<view class="address-info">{{addressMsg.area}}{{addressMsg.address}}</view>
						<image src="https://wx.2024csnl.com/static/goods/into-black.png" mode="aspectFill" class="into" />
					</view>
					<view class="info">
						<text>{{addressMsg.name}}</text>
						<text>{{addressMsg.tel}}</text>
					</view>
				</view>
				<view class="flex-center" style="margin-top: 40rpx;">
					<view class="goOnBtn" @click="onSetSubmitOrder">继续支付</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getBuyNow,
		setSubmitOrder,
		getPayType
	} from "../../api/index.js"
	export default {
		data() {
			return {
				current: 0,
				remark: '',
				addressMsg: {},
				type: 0, //配送方式
				freightList: [], //配送方式列表
				proData: [],
				payMoney: '', //待支付金额
				allbuydata: {}, //订单详情
				payorderid: null, //提交订单后获取的id
				prodata: '',
				pageType: '',
				business: {}
			}
		},
		async onShow() {
			// const sessionData = uni.getStorageSync('sessionData')
			// if (!sessionData || !sessionData.session_id) {
			// 	uni.reLaunch({
			// 		url: '/pages/login/loginAndRegister'
			// 	})
			// }
			// 选取地址
			uni.$on('selectAddress', async (data) => {
				this.addressMsg = data
			})
			// 监听是否刷新
			uni.$on('refresh', async (data) => {
				this.onGetBuyNow()
			})
		},
		beforeDestroy() {
			uni.$off('selectAddress');
		},
		onLoad(opt) {
			this.prodata = opt.prodata
			// this.pageType=opt.pageType
			this.onGetBuyNow()
		},
		computed: {
			popupAddress() {
				return this.freightList?.[this.type]?.storedata
			},
			getVal() {
				return this.freightList?.[this.type]?.storedata?.[this.current] || {}
			},
		},
		methods: {
			// 加购数量操作
			setCartNum(type) {
				if (type == 'add') {
					// this.cartNum += 1
				} else {
					// this.cartNum == 1 ? this.cartNum = 1 : this.cartNum -= 1
				}
			},
			radioChange(e) {
				let list = this.freightList?.[this.type]?.storedata
				list.forEach((item, i) => {
					if (item.id == e.detail.value) {
						this.current = i;
					}
				})
				this.close('popup')
			},
			// 是否显示商家地址
			showMerchantAddress() {
				// return this.freightList[this.type]?.name != '商家配送'&&this.freightList[this.type]?.name != '普通快递'
				return this.freightList[this.type]?.name != '商家配送'
			},
			// 是否显示用户地址
			showAddress() {
				return this.freightList[this.type]?.name != '到店自提'
			},
			open(n) {
				this.$refs[n].open();
			},
			close(n) {
				this.$refs[n].close();
			},
			// 支付方式
			async onGetPayType() {
				const res = await getPayType('s=/ApiPay/pay', {
					orderid: this.payorderid,
					thisurl: '',
					tourl: '',
					scene: 1001
				})
				console.log(res, "res----***")
				const {
					data,
					status,
					msg
				} = res.data
				if (status == 1) {
					const {
						money,
						// orderid
						id,
					} = data.payorder
					// this.onSkip(`/business/pages/business_tab/orderPay?money=${money}&orderId=${id}&pageType=${this.pageType}`)
					this.onSkip(`/business/pages/business_tab/orderPay?money=${money}&orderId=${id}&bid=${this.allbuydata.bid}`)
				} else {
					this.showToast(msg)
				}

			},
			onClickAffirmBtn() {
				if (this.freightList[this.type]?.name == '到店自提') {
					uni.showModal({
						title: '提示',
						content: `您当前选择的是【到店自提】方式取货，需要您到实体店取货，请知悉！`,
						confirmColor: '#41644A',
						showCancel: true,
						confirmText: '继续支付',
						success: (msg) => {
							if (msg.confirm) {
								this.onSetSubmitOrder()
							}
						}
					});
				} else {
					if (this.addressMsg.length == 0) {
						this.showToast('收货地址不能为空')
						return
					}
					this.open('affirmPopup')
				}

			},
			// 提交订单
			async onSetSubmitOrder() {

				let storeId
				// console.log(this.freightList)
				if (this.freightList[0].name == '到店自提') {
					storeId = this.freightList[0]?.storedata[this.current]?.id
				}
				if (this.freightList[0].name == '商家配送') {
					storeId = ''
				}
				if (this.freightList.length > 1) {
					storeId = this.freightList[1].storedata[this.current]?.id
				}

				let formdata = {}
				this.proData.forEach((item, i) => {
					formdata[`form${i}`] = item.remark
				})
				// console.log(formdata, "((9))")
				let buydata = [{
					bid: this.allbuydata.bid,
					prodata: this.allbuydata.prodatastr,
					cuxiaoid: this.allbuydata.cuxiaoid,
					freight_time: this.allbuydata.freight_time,
					freight_id: this.freightList[this.type].id,
					storeid: storeId,
					formdata: formdata
				}]
				console.log(this.addressMsg)
				const {
					id,
					name,
					tel
				} = this.addressMsg
				const res = await setSubmitOrder('s=/ApiShop/createOrder', {
					usescore: 0,
					addressid: id,
					linkman: name,
					tel: tel,
					buydata: buydata
				})
				const {
					payorderid,
					status,
					msg
				} = res.data
				if (status == 1) {
					this.payorderid = payorderid
					this.onGetPayType()
				} else {
					this.showToast(msg)
				}
				console.log(res.data, "立即支付---")
			},

			openMap(lon, lat, name) {
				// console.log("获取经纬度ssssfff", lon, lat);
				uni.openLocation({
					latitude: parseFloat(lat),
					longitude: parseFloat(lon),
					scale: 15,
					name: name
				})
			},
			// 立即购买(加载数据)
			async onGetBuyNow() {
				const res = await getBuyNow(`s=/ApiShop/buy&prodata=${this.prodata}`)
				const {
					address,
					allbuydata,
					status,
					msg
				} = res.data
				// console.log(res, "立即购买")
				if (status == 1) {
					this.allbuydata = allbuydata[0]
					this.business = allbuydata[0]?.business
					this.freightList = allbuydata[0]?.freightList
					this.payMoney = allbuydata[0]?.product_price
					this.proData = allbuydata[0]?.prodata
					this.addressMsg = address
				} else {
					this.showToast(msg)
				}
			},
			checkType(i) {
				this.type = i
			}
		}
	}
</script>

<style>
	page {
		background: #F7F7F7;
	}

	.p-c {
		color: #B3B3B3;
	}
</style>


<style lang="scss" scoped>
	.goOnBtn {
		width: 100%;
		padding: 30rpx 0;
		border-radius: 80rpx;
		background: #41644A;
		color: #fff;
		text-align: center;
	}

	.popBox {
		padding: 40rpx 50rpx;
		font-size: 30rpx;
		background: #fff;
		border-radius: 40rpx 40rpx 0px 0px;

		.listBigBox {
			max-height: 30vh;
			overflow: auto;

			.select {
				align-items: center;
				padding: 30rpx 0;
				border-bottom: 1px solid #F5F5F5;

				image {
					width: 65rpx;
					height: 65rpx;
					margin-right: 33rpx;
				}

			}
		}

		.listBigBox::-webkit-scrollbar {
			display: none;
		}

		.rightGoIconBox {
			image {
				width: 17rpx;
				height: 30rpx;
			}
		}



		.titBox {
			position: relative;

			image {
				width: 34rpx;
				height: 34rpx;
				position: absolute;
				right: 0;
				top: 0;

			}
		}
	}

	.order-address {
		background: url('https://img.2024csnl.com/static/2.x/a86.png') center bottom repeat-x #FFF;
		border-radius: 20rpx;
		padding: 18rpx 20rpx;
		padding-bottom: 4rpx;
		min-height: 160rpx;

		.address-info {
			font-size: 29rpx;
			width: 580rpx;
		}

		.info {
			color: #999999;
			font-size: 27rpx;
			margin: 20rpx 0;
		}

		.order-add {
			width: 40rpx;
			height: 40rpx;
			margin-right: 15rpx;
		}

		.add-address {
			color: #41644A;
			line-height: 160rpx;
			text-align: center;
		}
	}

	.type-box {
		position: relative;
		background: #fff;
		padding: 20rpx;
		.inner {
			display: flex;
			align-items: center;
			padding: 10rpx;
			background: #f8f8f8;
			border-radius: 10rpx;
		}
		.take-type {
			flex: 1;
			font-size: 28rpx;
			line-height: 80rpx;
			text-align: center;
			background-color: #f8f8f8;
			border-radius: 10rpx;
		}
		.is-active {
			background: #fff;
			color: #263A29;
			font-weight: bold;
		}
	}

	.address-checked {
		margin-top: 0;
		border-radius: 0 0 20rpx 20rpx;
	}
	
	.order-info__shop {
		background: #fff;
		margin: 20rpx 0;
		&-thead {
			position: relative;
			margin: 0 20rpx;
			border-bottom: 1px solid #eee;
			.name {
				height: 100rpx;
				line-height: 100rpx;
				display: flex;
				align-items: center;
				image {
					display: block;
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}
				text {
					font-size: 30rpx;
				}
			}
		}
		&-tbody {
			position: relative;
		}
	}

	.order-infobox {
		position: relative;
		margin: 20rpx;
		padding-bottom: 30rpx;
		.order-goods-shop {
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #F5F5F5;
		}

		.order-icon {
			width: 30rpx;
			height: 26rpx;
			margin-right: 20rpx;
		}

		.order-info {
			margin-top: 30rpx;

			.order-goods-img {
				width: 160rpx;
				height: 160rpx;
				margin-right: 25rpx;
				background-color: #B3B3B3;
				border-radius: 10rpx;
			}

			.goods-name {
				font-size: 30rpx;
				line-height: 40rpx;
				text-align: justify;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}
			.goods-gg {
				margin: 20rpx 0;
				color: #999;
			}
			.order-goods-price {
				.price-util {
					line-height: 40rpx;
					font-size: 36rpx;
					font-weight: bold;
					color: #E86A33 !important;
				}
			}

			.order-card {
				background: #F8F8F8;
				padding: 20rpx;
				min-width: 248rpx;
				border-radius: 13rpx;
				border: 1rpx solid #F8F8F8;

				.order-value {
					color: #999999;
					font-size: 21rpx;
					margin-bottom: 21rpx;
				}
			}
		}
		.tag-iconbox {
			display: flex;
			align-items: center;
			.tag-box {
				padding: 20rpx;
				image {
					display: block;
					width: 40rpx;
					height: 40rpx;
					border: 1px solid #aaa;
					padding: 10rpx;
					border-radius: 6rpx;
				}
			}
			.tag-num {
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 20rpx;
				font-size: 30rpx;
				font-weight: bold;
			}
		}

		.discount {
			margin-right: 16rpx;
		}

		.input-box {
			font-size: 27rpx;
			text-align: right;
		}

		.order-check {
			width: 34rpx;
			height: 34rpx;
		}
		
		.order-group {
			border-top: 1px solid #eee;
			position: relative;
			margin-top: 30rpx;
		}

	}

	.pay-box {
		position: relative;
		height: 120rpx;
		.inner {
			display: flex;
			font-size: 27rpx;
			position: fixed;
			left: 0;
			bottom: 0;
			right: 0;
			padding-left: 27rpx;
			background-color: #FFF;
			padding: 20rpx;
		}

		.c-red {
			font-size: 33rpx;
			color: #E86A33 !important;
		}
		.label {
			flex: 1;
			line-height: 80rpx;
			font-size: 30rpx;
		}

		.pay-now {
			font-size: 32rpx;
			background-color: #E86A33;
			color: #FFF;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 80rpx;
			padding: 0 50rpx;
		}
	}

	.affirmTit {
		color: #41644A;
		font-weight: bold;
		margin-bottom: 50rpx;
		font-size: 34rpx;
	}
	
	.page {
		overflow: hidden;
	}
</style>